<script setup lang="ts">
import useLog from '@renderer/composables/useLog'
import useRecord from '@renderer/composables/useRecord'
import { dayjs, ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import ProjDialog from '@renderer/components/projDialog.vue'
import CompDialog from '@renderer/components/compDialog.vue'
import TeamDialog from '@renderer/components/teamDialog.vue'

import { ref } from 'vue'
import useProj from '@renderer/composables/useProj'
import useComp from '@renderer/composables/useComp'
import useTeam from '@renderer/composables/useTeam'

const route = useRoute()
const { find, log } = useLog()
const { find: findProj, proj } = useProj()
const { find: findComp, comp } = useComp()
const { find: findTeam, team } = useTeam()
const {
  all: allRecord,
  read: readRecord,
  add: addRecord,
  del: delRecord,
  records,
  recordDbs
} = useRecord()

const projDialogVisiable = ref(false)
const compDialogVisiable = ref(false)
const teamDialogVisiable = ref(false)

const init = async () => {
  await readRecord(+route.params.id)
  await allRecord()

  for (const r of records.value) {
    const re = recordDbs.value.find(
      (db) => r.date === db.date && db.projId === r.proj.id && db.teamId === r.team.id
    )
    r.isDb = re ? true : false
  }
}

const editProj = async (record: RecordModel) => {
  await findProj(record.proj.id!)
  projDialogVisiable.value = true
}

const editComp = async (record: RecordModel) => {
  await findComp(record.comp.id!)
  compDialogVisiable.value = true
}

const editTeam = async (record: RecordModel) => {
  await findTeam(record.team.id!)
  teamDialogVisiable.value = true
}

const close = async () => {
  await readRecord(+route.params.id)
  for (const record of records.value) {
    const r = recordDbs.value.find(
      (db) =>
        db.date === record.date && db.projId === record.proj.id && db.teamId === record.team.id
    )
    record.isDb = r ? true : false
  }
  compDialogVisiable.value = false
  projDialogVisiable.value = false
  teamDialogVisiable.value = false
}

const saveTeam = async (record: RecordModel) => {
  if (!record.isDb) {
    // true 已保存record数据
    const r = recordDbs.value.find(
      (db) =>
        db.date === record.date && db.projId === record.proj.id && db.teamId === record.team.id
    )
    console.log(r?.id)
    await delRecord(r!.id)
    record.isDb = false
    ElMessage({
      type: 'warning',
      message: '记录取消!'
    })
  } else {
    // false 未保存record数据
    await addRecord(record)
    record.isDb = true
    ElMessage({
      type: 'success',
      message: '记录保存!'
    })
  }
}

find(+route.params.id)
init()
</script>

<template>
  <el-card shadow="always" class="h-full">
    <template #header>
      <div class="date">
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ name: 'logList' }">新进班组列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{ dayjs(log?.date).format('YYYY年MM月DD日') }}</el-breadcrumb-item>
        </el-breadcrumb>

        <el-button
          type="primary"
          size="default"
          @click="$router.push({ name: 'log', params: { id: route.params.id } })"
          >转换日志</el-button
        >
      </div>
    </template>
    <div class="content">
      <el-table :data="records" border stripe>
        <el-table-column label="工程" width="" align="center">
          <template #default="scoped">
            <el-link type="primary" underline target="_blank" @click="editProj(scoped.row)">{{
              scoped.row.proj.shortName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="分包商" width="" align="center">
          <template #default="scoped">
            <el-link type="primary" underline target="_blank" @click="editComp(scoped.row)">{{
              scoped.row.comp.shortName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="班组" width="" align="center">
          <template #default="scoped">
            <el-link type="primary" underline target="_blank" @click="editTeam(scoped.row)">{{
              scoped.row.team.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="负责人" prop="team.fzr" width="" align="center" />
        <el-table-column label="操作" width="" align="center">
          <template #default="scoped">
            <el-switch
              v-model="scoped.row.isDb"
              inline-prompt
              active-text="是"
              inactive-text="否"
              @change="saveTeam(scoped.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>

  <ProjDialog :visiable="projDialogVisiable" @close="close" :proj="proj" />
  <CompDialog :visiable="compDialogVisiable" @close="close" :comp="comp" />
  <TeamDialog :visiable="teamDialogVisiable" @close="close" :team="team" />
</template>

<style scoped lang="scss">
.date {
  @apply text-[16px] flex justify-between items-center;
}
.content {
  @apply pt-5 opacity-80 text-[14px] border-b;
}
.created {
  @apply text-xs flex justify-end gap-2 opacity-60 items-center;
}
</style>
